<template>
  <div>
    <header class="headercont">
      <section class="headermain">
        <ul class="headerleft">
          <li class="leftlist">
            <router-link to="home">
              <img v-if="lan === 'English'" :src="require('_img/logoen.png')" alt="PPEX" />
              <img v-else :src="require('_img/logo.png')" alt="PPEX" />
            </router-link>
          </li>
          <li class="leftlist" :class="{ active: headertype == 1 }">
            <router-link to="home">
              <p>{{ $t("header.route[0]") }}</p>
            </router-link>
          </li>
          <li class="leftlist" :class="{ active: headertype == 2 }" v-if="false">
            <router-link to="contract">
              <p>{{ $t("header.route[1]") }}</p>
            </router-link>
          </li>
          <li class="leftlist" :class="{ active: headertype == 3 }">
            <router-link to="transaction">
              <p>{{ $t("header.route[2]") }}</p>
            </router-link>
          </li>
          <li class="leftlist" :class="{ active: headertype == 7 }">
            <el-dropdown>
              <a href="javascript:void(0);">
                <p>{{ $t("header.add[0]") }}
                  <i class="el-icon-arrow-down"></i>
                </p>
              </a>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <router-link to="fabimatch" class="meeee">快捷买币</router-link>
                </el-dropdown-item>
                <el-dropdown-item>
                  <router-link to="fabitransaction" class="meeee">自选买币</router-link>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </li>

          <li class="leftlist" :class="{ active: headertype == 8 }" v-if="false">
            <router-link to="extension">
              <p>{{ $t("header.add[1]") }}</p>
            </router-link>
          </li>
          <li class="leftlist" :class="{ active: headertype == 4 }" v-if="false">
            <router-link to="newsflash">
              <p>{{ $t("header.route[3]") }}</p>
            </router-link>
          </li>
          <!-- <li class="leftlist" :class="{'active': headertype == 5}">
            <router-link to="competition">
              <p>{{$t('header.route[13]')}}</p>
            </router-link>
          </li>
          <li class="leftlist" :class="{'active': headertype == 6}">
            <router-link to="power">
              <p>{{$t('header.route[14]')}}</p>
            </router-link>
          </li>-->
        </ul>
        <ul class="headerright">
          <!-- 资产 -->
          <li class="rightlist" v-if="getTokentype == 2">
            <div class="yuyan">
              <el-dropdown>
                <span class="white">
                  {{ $t("header.add[2]") }}
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>
                    <router-link to="/assetstotal?type=1" class="meeee">{{
                      $t("header.add[3]")
                    }}</router-link>
                  </el-dropdown-item>
                  <el-dropdown-item v-if="false">
                    <router-link to="/assetstotal?type=2" class="meeee">{{
                      $t("header.add[4]")
                    }}</router-link>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <router-link to="/assetstotal?type=3" class="meeee">{{
                      $t("header.add[5]")
                    }}</router-link>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </li>
          <!-- 订单入口 start  -->
          <li class="rightlist" v-if="getTokentype == 2 && headertype == 2">
            <router-link to="contractorder" class="white">{{
              $t("header.route[4]")
            }}</router-link>
          </li>
          <li class="rightlist" v-if="getTokentype == 2 && headertype == 3">
            <router-link to="transactionorder" class="white">{{
              $t("header.route[4]")
            }}</router-link>
          </li>
          <li class="rightlist" v-if="getTokentype == 2 && headertype == 7">
            <router-link to="fabiorder" class="white">{{
              $t("header.route[4]")
            }}</router-link>
          </li>
          <li class="rightlist" v-if="getTokentype == 2 && headertype == 7 && false">
            <router-link to="applyshop" class="white">{{
              $t("header.add[6]")
            }}</router-link>
          </li>
          <!-- 订单入口 end  -->
          <li class="rightlist" v-if="getTokentype == 2">
            <div class="yuyan">
              <el-dropdown>
                <span class="el-dropdown-link">
                  <i class="el-icon-user-solid"></i>
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>
                    <div class="user_info">
                      <i class="el-icon-user-solid"></i>
                      <p>{{ $store.state.user.phone }}</p>
                    </div>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <router-link to="securitycenter" class="meeee">
                      <i></i>
                      {{ $t("header.route[6]") }}
                    </router-link>
                  </el-dropdown-item>
                  <el-dropdown-item v-if="false">
                    <router-link to="authentication" class="meeee">
                      <i></i>
                      {{ $t("header.route[7]") }}
                    </router-link>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <router-link to="payways" class="meeee">
                      <i></i>
                      {{ $t("header.add[7]") }}
                    </router-link>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <router-link to="withdrawal" class="meeee">
                      <i></i>
                      {{ $t("header.route[8]") }}
                    </router-link>
                  </el-dropdown-item>
                  <el-dropdown-item v-if="false">
                    <router-link to="extension" class="meeee">
                      <i></i>
                      {{ $t("header.route[9]") }}
                    </router-link>
                  </el-dropdown-item>
                  <el-dropdown-item v-if="$store.state.user.authentication && false">
                    <div class="meeee" @click="openMode">
                      <i></i>
                      {{ $t("header.add[8]") }}
                    </div>
                  </el-dropdown-item>
                  <el-dropdown-item divided>
                    <a @click="logoutd">
                      <i></i>
                      {{ $t("header.route[10]") }}
                    </a>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </li>
          <li class="rightlist" v-if="getTokentype == 1">
            <router-link to="login">
              <el-button type="primary">{{ $t("header.route[12]") }}</el-button>
            </router-link>
          </li>
          <li class="rightlist" v-if="getTokentype == 1 && false">
            <router-link to="register">
              <el-button>{{ $t("header.route[11]") }}</el-button>
            </router-link>
          </li>
          <li class="rightlist" v-if="false">
            <div class="yuyan">
              <el-dropdown @command="changeLangEvent">
                <span class="el-dropdown-link">
                  {{ lan }}
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="zh">简体中文</el-dropdown-item>
                  <el-dropdown-item command="en">English</el-dropdown-item>
                  <!-- <el-dropdown-item command="tw">繁體中文</el-dropdown-item> -->
                  <!-- <el-dropdown-item command="ja">日本語</el-dropdown-item> -->
                  <!-- <el-dropdown-item command="ko">한국어</el-dropdown-item> -->
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </li>
        </ul>
      </section>
    </header>
    <div class="homemain">
      <router-view />
      <!-- <router-view :key="key()"></router-view> -->
    </div>
    <footer class="footerhome">
      <ul class="footermain">
        <li class="mianlist">
          <img src="../../assets/img/footer-logo.png" class="footer_logo" alt />
        </li>
        <li class="mianlist">
          <h2 class="title">{{ $t("header.index[0]") }}</h2>
          <ol class="contitle">
            <li class="conlist">
              <router-link :to="{ name: 'adoutusclause', query: { id: 9 } }">{{
                $t("header.index[1]")
              }}</router-link>
            </li>
            <li class="conlist">
              <router-link :to="{ name: 'adoutusclause', query: { id: 4 } }">{{
                $t("header.index[2]")
              }}</router-link>
            </li>
            <li class="conlist">
              <router-link :to="{ name: 'adoutusclause', query: { id: 3 } }">{{
                $t("header.index[3]")
              }}</router-link>
            </li>
          </ol>
        </li>
        <li class="mianlist">
          <h2 class="title">{{ $t("header.index[4]") }}</h2>
          <ol class="contitle">
            <li class="conlist">
              <router-link :to="{ name: 'adoutusclause', query: { id: 8 } }">{{
                $t("header.index[5]")
              }}</router-link>
            </li>
            <!-- <li class="conlist">
              <router-link :to="{name:'adoutusclause',query:{id: 9}}">{{$t('header.index[6]')}}</router-link>
            </li>-->
          </ol>
        </li>
        <li class="mianlist">
          <h2 class="title">{{ $t("header.index[7]") }}</h2>
          <ol class="contitle">
            <li class="conlist">
              <router-link to="adoutus">{{
                $t("header.index[8]")
              }}</router-link>
            </li>
            <li class="conlist">
              <router-link :to="{ name: 'adoutusclause', query: { id: 7 } }">{{
                $t("header.index[9]")
              }}</router-link>
            </li>
          </ol>
        </li>
        <!-- <li class="mianlist">
          <h2 class="title">{{$t('header.index[10]')}}</h2>
          <h3 class="h3">
            <a :href="'mailto:'+$store.state.app.contactemail">{{$store.state.app.contactemail}}</a>
          </h3>
          <h4 class="fanxiang">
            <a href>
              <img :src="require('_img/home/feacbook.png')" alt="fdsf" />
            </a>
            <a href>
              <img :src="require('_img/home/hb.png')" alt="fsdfsa" />
            </a>
            <a href>
              <img :src="require('_img/home/twitter.png')" alt="fdsafsd" />
            </a>
          </h4>
        </li>-->
      </ul>
      <div class="copyright">©2017 - 2020 PPEX All Rights Reserved</div>
    </footer>
    <div class="mask" v-if="showBox">
      <div class="box">
        <i class="close el-icon-circle-close" @click="showBox = false"></i>
        <h2>{{ $t("header.add[8]") }}</h2>
        <input type="text" v-model="keywords" :placeholder="$t('gift[5]')" />
        <button @click="getMoney">{{ $t("gift[6]") }}</button>
        <p>{{ $t("gift[7]") }}</p>
        <p>{{ $t("gift[8]") }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { receive } from "@/api/fabitransaction";
 
import { getToken, EmailSms } from "@/libs/util";
import { mapActions } from "vuex";
export default {
  name: "homemain",

  data() {
    return {
      getTokentype: "", //是否登录  2登录 1未登录
      headertype: 1, //顶部下划线显示  1首页   2永续合约   3币币交易  4快讯
      lan: "English",
      showBox: false,
      keywords: "",
    };
  },
  watch: {
    $route: function (to, from) {
      sessionStorage.activeUrl = this.$route.name;
      this.key();
    },
  },
  methods: {
    ...mapActions(["getUserInfo", "assetInfo", "contentInfo"]),
    changeLangEvent(e) {
      let lan = localStorage.getItem("lang");
      if (lan && lan == e) {
        return;
      }
      localStorage.setItem("lang", e);
      this.lang = e;
      this.$i18n.locale = this.lang; //关键语句
      this.$router.go(0);
    },
    openMode() {
      this.keywords = "";
      this.showBox = true;
    },
    getMoney() {
      if (!this.keywords) {
        this.$message.error(this.$t("gift[5]"));
        return;
      }
      receive(this.keywords)
        .then((res) => {
            this.keywords = "";
            this.showBox = false;
            this.$message.success("操作成功");
        });
    },
    key() {
      switch (this.$route.name) {
        case "home":
          this.headertype = 1;
          break;
        case "contractmain":
          this.headertype = 2;
          break;
        case "contractorder":
          this.headertype = 2;
          break;
        case "transactionmain":
          this.headertype = 3;
          break;
        case "transactionorder":
          this.headertype = 3;
          break;
        case "newsflash":
          this.headertype = 4;
          break;
        case "newsflashdetails":
          this.headertype = 4;
          break;
        case "competition":
          this.headertype = 5;
          break;
        case "power":
          this.headertype = 6;
          break;
        case "fabitransaction":
          this.headertype = 7;
          break;
        case "fabiorder":
          this.headertype = 7;
          break;
        case "fabimatch":
          this.headertype = 7;
          break;
        case "extension":
          this.headertype = 8;
          break;
        default:
          this.headertype = 0;
          break;
      }
      return this.$route.name !== undefined
        ? this.$route.name + new Date()
        : this.$route + new Date();
    },
    logoutd() {
      this.$confirm(this.$t("header.tishi[2]"), this.$t("header.tishi[1]"), {
        type: "warning",
      }).then(() => {
        // logout().then(res => {
        // if (res.data.status_code == 200) {
        this.$message({
          message: this.$t("header.tishi[3]"),
          type: "success",
        });
        localStorage.removeItem("token");
        setTimeout(() => {
          this.$router.push({
            path: "/login",
          });
        }, 800);
        // } else {
        // this.$message.error(res.data.message);
        // }
        // }).catch(err => {});
      });
    },
  },
  created() {
    this.key();
    let la = localStorage.getItem("lang");
    if (la) {
      if (la == "zh") {
        this.lan = "简体中文";
      } else if (la == "tw") {
        this.lan = "繁體中文";
      } else if (la == "ja") {
        this.lan = "日本語";
      } else if (la == "ko") {
        this.lan = "한국어";
      } else {
        this.lan = "English";
      }
    }
    if (getToken("token")) {
      this.getTokentype = 2;
      this.assetInfo();
      this.getUserInfo();
    } else {
      this.getTokentype = 1;
    }
    this.contentInfo();
  },
};
</script>
<style lang='less'>
.meeee {
  color: #222222 !important;
  display: block;
}

.meeee:active {
  color: #222222 !important;
}

.user_info {
  text-align: center;
  color: #22273d;

  i {
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 50%;
    background-color: #ddd;
  }
}

.black {
  .headermain {
    background: #182330 !important;
  }

  .yuyan .el-dropdown {
    color: white !important;
  }

  .homemain {
    background-color: #0a1017 !important;
    overflow: hidden;
    min-height: 70vh;
  }

  .footerhome {
    background: #000 !important;

    .title,
    .conlist a,
    .h3 a,
    .footertitil {
      color: white !important;
    }
  }
}

.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;

  .box {
    width: 480px;
    height: 590px;
    margin: 200px auto;
    color: #fff;
    background-image: url(../../assets/img/box-bg.png);
    background-size: 100% 100%;
    padding: 0 50px;
    text-align: center;
    position: relative;

    .close {
      position: absolute;
      right: 0;
      top: 0;
      font-size: 50px;
      color: #fff;
    }

    h2 {
      font-size: 50px;
      color: #fdd56c;
      line-height: 100px;
    }

    input {
      width: 100%;
      height: 42px;
      padding: 0 20px;
      background: rgba(16, 18, 55, 1);
      border-radius: 4px;
      margin-top: 100px;
      color: #fff;
    }

    button {
      width: 200px;
      height: 58px;
      margin-top: 30px;
      background-color: transparent;
      background-image: url(../../assets/img/box-btn.png);
      background-size: 100% 100%;
      color: #fff;
      font-size: 16px;
    }

    p {
      text-align: left;
      margin-top: 10px;
    }
  }
}
</style>
